<template>
  <div class="course">
    <div class="top-top">
      <el-button style="height: 100%;float: left;margin-right: 2%;" @click="newCourse">添加课程</el-button>
      <!-- <div style="margin-right: 2%;">
        <el-input v-model="input" style="width: 240px;height: 100%;" placeholder="输入搜索关键词" @keyup.enter="seach"/>
        <el-button @click="seach" style="height: 100%;">
          <template #icon>
            <iconSeach></iconSeach>
          </template>
        </el-button>
      </div> -->
      <div style="margin-right: 2%;">
        <el-select v-model="selectValue" placeholder="切换班级" @change="select" style="width: 170px;height: 100%;">
          <el-option
            v-for="item in selectClassValue"
            :key="item.cclassNub"
            :label="item.cclassName"
            :value="item.cclassNub"
          />
        </el-select>
      </div>
      <div style="margin-right: 2%;">
        <el-radio-group v-model.number="type" @change="status" class="ml-4">
          <el-radio :value=0 size="large">已开课</el-radio>
          <el-radio :value=1 size="large">已结课</el-radio>
          <el-radio :value=3 size="large">已结课</el-radio>
        </el-radio-group> 
      </div>
    </div>
    <div class="main">
      <el-table :data="courseList" style="width: 100%;":row-style="{height:'55px'}" :header-row-style="{height:'55px'}" >
        <el-table-column prop="courseName" label="课程名称" class="courseList" align="center"/>
        <el-table-column label="课程图片" class="courseList" align="center" #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.imgUrl" fit="fill" />
        </el-table-column>
        <el-table-column prop="startTime" label="开课时间" class="courseList" align="center"/>
        <el-table-column prop="description" label="课程描述" class="courseList" align="center"/>
        <el-table-column prop="state" label="状态" class="courseList" align="center"/>
        <el-table-column label="操作" align="center" #default="scope">
          <el-button style="border: 0;margin: 0;" @click="editStudent(scope.row.id)">
            <template #icon>
              <iconEdit></iconEdit>
            </template>
          </el-button>
          
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total,prev, pager, next"
        @current-change="handleCurrentChange"
      />
    </div>
    </div>
  </div>
<!-- 编辑课程弹出框 -->
<el-dialog v-model="dialogFormCourse" title="编辑课程信息" width="500">
  <el-form :model="formCourse">
    <el-form-item label="课程名称" >
      <el-input v-model="formCourse.courseName" autocomplete="off" />
    </el-form-item>
    <el-form-item label="课程图片" style="margin: 0;">
      <el-upload
          class="avatar-uploader"
          action="/api/admin/common/upload"
          :show-file-list="false"
          :on-success="afterUploadSuccessEDIT"
          :before-upload="beforeUploadEDIT"
        >
          <img :src="formCourse.imgUrl" class="avatar" />
          <template #tip>
          <div class="el-upload__tip text-red" style="margin: 0;padding: 0;">点击更换课程图片</div>
    </template>
        </el-upload>

    </el-form-item>
    <el-form-item label="开课时间">
      <el-date-picker
        style="width: 100%;"
        v-model="formCourse.startTime"
        type="date"
        placeholder="请选择开课时间"
        value-format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="课程状态" >
      <el-radio-group v-model="formCourse.state">
    <el-radio :value=0>已开课</el-radio>
    <el-radio :value=1>已结课</el-radio>
    <el-radio :value=3>未开课</el-radio>
  </el-radio-group>
    </el-form-item>
    <el-form-item label="课程描述">
      <el-input
    v-model="formCourse.description"
    style="width: 240px"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="请输入课程描述"
  />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormCourse = false">取消</el-button>
      <el-button type="primary" @click="submitUpdate">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>

<!-- 新增课程弹出框 -->
<el-dialog v-model="dialogFormNewCourse" title="新增课程" width="500">
  <el-form :model="newCourseForm">
    <el-form-item label="班级号&emsp;" >
      <el-input v-model.number="newCourseForm.cclassNub" autocomplete="off" />
    </el-form-item>
    <el-form-item label="课程名称" >
      <el-input v-model="newCourseForm.courseName" autocomplete="off" />
    </el-form-item>
    <el-form-item label="课程号&emsp;" >
      <el-input v-model.number="newCourseForm.courseNub" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密&emsp;&emsp;码" >
      <el-input v-model="newCourseForm.password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="课程图片">
        <el-upload
          class="avatar-uploader"
          action="/api/admin/common/upload"
          :show-file-list="false"
          :on-success="afterUploadSuccessNEW"
          :before-upload="beforeUploadNEW"
        >
          <img v-if="newCourseForm.imgUrl" :src="newCourseForm.imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

    </el-form-item>
    <el-form-item label="开课时间">
      <el-date-picker
        style="width: 100%;"
        v-model="newCourseForm.startTime"
        type="datetime"
        placeholder="请选择开始时间"
        value-format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="结课时间">
      <el-date-picker
        style="width: 100%;"
        v-model="newCourseForm.endTime"
        type="datetime"
        placeholder="请选择结课时间"
        value-format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="课程状态" >
      <el-radio-group v-model="newCourseForm.state">
    <el-radio :value=0>正常</el-radio>
    <el-radio :value=1>结课</el-radio>
  </el-radio-group>
    </el-form-item>
    <el-form-item label="课程描述">
      <el-input
    v-model="newCourseForm.description"
    style="width: 100%"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="请输入课程描述"
  />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormNewCourse = false">取消</el-button>
      <el-button type="primary" @click="submitNewCourse">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref,reactive } from 'vue';
import IconEdit from '../../../assets/edit.vue';
import IconSeach from '../../../assets/seach.vue';
import iconDelete from '../../../assets/delete.vue';
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadRawFile } from 'element-plus'
import { onMounted } from 'vue';
import { getSelectAPI } from '../../../api/teacher/work';
import {createCourseAPI, getCourseAPI,getUpdateCourseInfoAPI,submitUpdateCourseAPI} from '../../../api/teacher/course';
import { throttleByRaf } from 'element-plus/es/utils';
import { nextTick } from 'vue';

const upload = ref<UploadInstance>()
const dialogFormCourse=ref(false)
const dialogFormNewCourse=ref(false)
const input=ref('')
const type=ref(0)
const total=ref(9)
const currentPage=ref(1)
const pageSize=ref(10)
const value1 = ref('2022-02-08')
const selectClassValue = ref([
  {
    cclassNub: 1,
    cclassName: 'Option1',
  },
])
const formCourse = ref({
  courseName: 'dfrytdytdf',
  imgUrl: 'https://www.toopic.cn/public/uploads/small/169139790585716913979057.jpg',
  startTime: '2024-06-21 18:55',
  state:3,
  description:'efeewwef'
})
const courseList = ref([
  {
    id: '1',
    name: 'dfdf',
    image: 'https://www.toopic.cn/public/uploads/small/169139790585716913979057.jpg',
    startTime: '2032-3-2',
    courseInfo:'wfweqq',
    status:'已开课'
  },
])

const newCourseForm=ref({
  cclassNub:null,
  courseName:'',
  courseNub:null,
  password:'',
  description:'',
  startTime:'',
  endTime:'',
  imgUrl:'',
  state:0
})
const newCourse=()=>{
  dialogFormNewCourse.value=true
}
//重置新增课程
const resetNewCourse=()=>{
  newCourseForm.value={
  cclassNub:null,
  courseName:'',
  courseNub:null,
  password:'',
  description:'',
  startTime:'',
  endTime:'',
  imgUrl:'',
  state:0
}
}
//提交新增课程
const submitNewCourse=async()=>{
  console.log("新增的课程",newCourseForm.value)
  const result=await createCourseAPI(newCourseForm.value)
  if(result.data.code==200){
    ElMessage.success("新增课程成功！")
    resetNewCourse()
    dialogFormNewCourse.value=false
    getCourseList()
  }else{
    ElMessage.warning("新增课程失败！")
  }

}
const seach=()=>{
  console.log('点击了搜索')

}
const select=()=>{
  console.log("点击了切换班级",selectValue)
  getCourseList()
}
const status=()=>{
  console.log("当前课程状态为",type.value)
  getCourseList()
}
//获取修改课程信息
const editStudent=async(id)=>{
  console.log("点击了编辑课程",id,typeof(id))

  const result=await getUpdateCourseInfoAPI(id)
  console.log("回显的编辑课程信息",result.data.data)
  formCourse.value=result.data.data
  dialogFormCourse.value=true
}
const deleteCourse=(id)=>{
  console.log("点击了删除课程",id)
  // dialogFormPassword.value=true
}
//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getCourseList()
}

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
//提交修改课程
const submitUpdate=async()=>{
  console.log("提交修改课程",formCourse.value)
  const result =await submitUpdateCourseAPI(formCourse.value)
  if(result.data.code==200){
    ElMessage.success("编辑课程信息成功！")
    dialogFormCourse.value = false
    getCourseList()
  }else{
    ElMessage.warning("编辑课程信息失败！")
  }

}

onMounted(()=>{
  getSelect().then(()=>{
    getCourseList()
  })
})
//获取课程列表
const getCourseList=async()=>{
  let params={
    cclassNub:selectValue.value,
    state:type.value,
    pageSize:pageSize.value,
    pageNo:currentPage.value
  }
  console.log("提交到后台的数据",params)
  const result=await getCourseAPI(params)
  console.log("获取到的课程列表",result)
  courseList.value=result.data.data.list
  total.value=result.data.data.total
}
//获取切换班级下拉框

const selectValue=ref('')
const getSelect=async()=>{
  const result=await getSelectAPI()
  selectClassValue.value=result.data.data.classList
  console.log("获取到的拉下框",selectClassValue.value)
  selectValue.value=result.data.data.classList[0].cclassNub
}

/////新增课程图片上传
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const afterUploadSuccessNEW: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  newCourseForm.value.imgUrl= URL.createObjectURL(uploadFile.raw!)
  console.log("图片地址",newCourseForm.value.imgUrl)
}

const beforeUploadNEW: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片文件只能是JPG格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}

/////编辑图片上传
const afterUploadSuccessEDIT: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  formCourse.value.imgUrl= URL.createObjectURL(uploadFile.raw!)
  console.log("图片地址",formCourse.value.imgUrl)
}

const beforeUploadEDIT: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片文件只能是JPG格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
</script>
<style scoped>
.course{
  height: 100%;
  width: 100%;
}
.top-top{
  width: 100%;
  height: 6%;
  display: flex;
}
:deep(.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger){
  height: 100%;
}
.main{
  width: 100%;
  height: 94%;
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--el-box-shadow-light);
  border-radius:8px;
}
.courseList{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.page{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  margin-bottom: 0.5%;
  padding-top: 0.5%;
}
:deep(.btn-prev){
  height: 1em;
}
:deep(.number){
  height: 1em;
}
:deep(.btn-next.is-last){
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.avatar-uploader .el-upload {

  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>